﻿<!DOCTYPE html>
<html>

	<head>
		<title>获取CSS的方法及注意点 </title>
		<style type="text/css">
			.box {
				width: 300px;
			}
		</style>
	</head>

	<body>
		<pre>
知识点一：elementObj.style 格式仅仅用来获取和设置行内CSS ,以下两个只能读取不用来设置。

知识点二：elementObj.currentStyle IE专用获取CSS方法.

知识点三：document.defaultView.getComputedStyle 兼容w3c新标准的THML5的新版浏览器
	格式二：getComputedStyle(element, null)
	参数一：element要获取css的元素。
	参数二：获取指定元素的伪元素的css样式，一般都不用伪元素直接写null即可。
	
代码示例如下：	
<div class="box" id="box" style="border:5px solid #0C3; height:200px;">富强民主的中国</div>
	<script>
		//兼容IE和谷歌等
		function getStyle(element){
		        return element.currentStyle || document.defaultView.getComputedStyle(element, null);
		}  
		 
		var box = document.getElementById("box");
		var  styleObj = getStyle(box);
		document.writeln(styleObj["width"]);  //格式一：读取css中的宽度(可以使用变量代替width)
		document.writeln(styleObj.width);	//格式二：读取css中的宽度(不能使用变量代替width)
		
		
		//如果想设置css用如下方法
		// element.style.属性 = "属性值"
 
	</script> 
</pre>
	</body>

</html>